<template>
  <div class="home">
    <lay-swiper />
    <div class="category-list"> <!-- 产品一级分类展示 -->
      <div class="con-box">
        <div class="category-box">
          <router-link v-for="cate in categoryList" :key="cate.id" :to="'/product/'+ cate.id" :title="cate.name">{{cate.name}}</router-link>
          <!-- <a href="#" title="气涨轴">气涨轴</a>
          <a href="#" title="同步带">同步带</a> -->
        </div>
      </div>
    </div>
    <!--公司简介-->
    <div class="about-box clearfix">
      <div class="con-box shadow-box">
        <p class="info" v-html="htmlContent">
            <!-- <a class="cimg" title="无锡博言传动机械有限公司" href="http://www.rain-lock.com/" target="_blank"><img :src="'/images/company.jpg'" /></a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.rain-lock.com/" target="_blank" class="cname" title="无锡博言传动机械有限公司">无锡博言传动机械有限公司</a>（Wuxi Boyan Hardware & Tools Co.,Ltd.）是于2011 年在苏州工业园区正式注册成立，是一家专门为您提供国外专业及高品质工具和化学品的公司。

            为您提供知名品牌工业产品5 万多种，并专职服务于企业的MRO 采购。无锡博言传动机械有限公司是国家外经贸局，海关总署批注的有进出口权的公司，我们的业务覆盖汽车、电力、石化、钢铁、轨道交通、船舶、机械、公用事业等多个领域，有着丰富的行业经验。我们为客户提供高质量的产品和专业及时的服务，拥有完善的销售、物流、技术支持体系。 -->
        </p>
        <div class="learn-more">
          <router-link to="/about" class="btn-more">Learn more</router-link>
        </div>
      </div>
    </div>
    <!--公司简介结束-->
    <!-- 滚动产品 -->
    <div class="product-box">
      <div class="con-box shadow-box">
        <div class="picMarquee-left">
          <div class="bd">
            <swiper :options="proSwiperOptions" v-if="scrollProducts.length">
              <!-- <swiper-slide>
                <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img :src="'/images/product.jpg'" /></a></div>
                <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
              </swiper-slide> -->
              <swiper-slide v-for="product in scrollProducts" :key="product.id">
                <div class="pic"><a :title="product.proName"><img :src="product.pic" /></a></div>
                <div class="title"><a :title="product.proName">{{ product.proName }}</a></div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </div>
    <!-- 滚动产品结束 -->
    <!-- 合作客户开始 -->
    <div class="partners-box">
      <div class="con-box shadow-box">
        <div class="tit">合作客户：</div>
        <div class="partner-scroll">
          <div class="bd">
            <swiper :options="partnerSwiperOptions" ref="partnerSwiper" v-if="partners.length">
              <!-- <swiper-slide>
                <div class="pic"><img :src="'/images/partner1.jpg'" /></div>
              </swiper-slide> -->
              <swiper-slide v-for="partner in partners" :key="partner.id">
                <div class="pic"><img :src="partner.imgSrc" /></div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </div>
    <!-- 合作客户结束 -->
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { LaySwiper } from '@/views/layout'
import { mapState, mapGetters } from 'vuex'
import api from '@/api'

let vm = null
export default {
  name: 'home',
  created() {
    vm = this
  },
  data() {
    return {
      proSwiperOptions: {
        loop: true,
				speed: 1000,
				grabCursor: true,
        parallax: true,
        slidesPerView: 5,
        spaceBetween: 30,
        // loopedSlides: 5,
				// autoHeight:true,
				autoplay: {
					delay: 4000,
					disableOnInteraction: false
        },
        on: {
          click: function() {
            const realIndex = this.realIndex
            vm.detail(realIndex)
          }
        }
      },
      partnerSwiperOptions: {
        loop: true,
				speed: 2000,
        // grabCursor: true, // 不显示手型
        allowTouchMove: false,
        parallax: true,
        slidesPerView: 8,
        spaceBetween: 30,
        freeMode: true,
        // loopedSlides: 5,
				// autoHeight:true,
				autoplay: {
          delay: 0,
          stopOnLastSlide: false,
					disableOnInteraction: false
				}
      },
      partners: [],
      scrollProducts: []
    }
  },
  mounted() {
    this.loadPartner()
    this.loadScrollProduct()
  },
  computed: {
    ...mapState(['categoryList']),
    ...mapGetters(['htmlContent'])
  },
  methods: {
    loadPartner() {
      api.partner().then(res => {
        if (res.data.errorCode === 0) {
          this.partners = res.data.data
          setTimeout(() => {
            let partnerSwiper = this.$refs.partnerSwiper.swiper
            // 鼠标覆盖停止自动切换
            partnerSwiper.el.onmouseover = function() {
              partnerSwiper.autoplay.stop()
            }

            // 鼠标离开开始自动切换
            partnerSwiper.el.onmouseout = function() {
              partnerSwiper.autoplay.start()
            }
          }, 50)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    loadScrollProduct() {
      api.scrollproduct().then(res => {
        if (res.data.errorCode === 0) {
          this.scrollProducts = res.data.data
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    detail(index) {
      const product = this.scrollProducts[index]
      this.$router.push(`/prodetail/${product.id}`)
    }
  },
  components: {
    LaySwiper,
    swiper,
		swiperSlide
  }
}
</script>
<style lang="scss" scoped>
/*产品一级分类展示*/
.category-list {
  margin: 20px 0;
}
.category-box {
  font-size: 0;
}
.category-box > a {
  line-height: 40px;
  display: inline-block;
  padding: 0 36px;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.category-box > a:first-child {
  padding-left: 0;
}
.category-box > a:after {
  content: '';
  position: absolute;
  height: 16px;
  width: 2px;
  background-color:#999;
  right: 0px;
  top: 50%;
  margin-top: -8px;
}
.category-box > a:last-child:after{
  width: 0px;
}

/*产品滚动图片*/
.product-box {
  margin: 20px 0 40px;
}
.product-box .con-box {
  padding: 20px;
}
.picMarquee-left{ overflow:hidden; position:relative; }
.picMarquee-left .bd .pic{ text-align:center; }
.picMarquee-left .bd .pic img{ width:100%; height:190px; display:block; padding:2px; border:1px solid #ccc; }
.picMarquee-left .bd .pic a:hover img{ border-color:#999;  }
.picMarquee-left .bd .title{
  line-height:30px; padding: 0 10px; background: #ebebeb; border: 1px solid #ccc; border-top: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*合作客户滚动图片*/
.partners-box {
  margin: 0 0 10px;
}
.partners-box .con-box {
  padding: 0 10px;
  display: flex;
  align-items: center;
}
.partners-box .tit {
  font-size: 16px;
  font-weight: 600;
}
.partner-scroll{ overflow:hidden; position:relative; flex: 1;  }
.partner-scroll .bd{ padding:10px;   }
.partner-scroll .bd .pic{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; height: 35px;}
.partner-scroll .bd .pic img{ max-width:100%; max-height:100%; display:block; }

.partner-scroll ::v-deep.swiper-container-free-mode {
  >.swiper-wrapper {
    transition-timing-function: linear; /*之前是ease-out*/
  }
}
</style>
